トップへ戻るニュースフォーラムFLASH-ML 過去ログBak@Flaダウンロードよくある質問と答
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   迷える子羊の部屋【初心者専用】
     曲線移動
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
1percenter
Åê¹ÆNo.41857
投稿日時: 2009-3-21 23:52
新米
居住地: 神奈川
投稿: 27
使用環境:
Mac os 10.5.6
Flash CS3
曲線移動
減速して目的地に着いたら止まる曲線移動の
アクションスクリプトを作りたいのですが
どなたかご教授頂けませんでしょうか?

制作環境はMac OS10.5.6
Adobe Flash CS3です。

パブリッシュ
Flash Player 9.0
AS2.0

初心者勉強中につき解説つきで
頂けると大変たすかります。

よろしくお願い致します。
野中文雄
Åê¹ÆNo.41858
投稿日時: 2009-3-22 0:42
ちょんまげら
居住地: 東京
投稿: 4247
使用環境:
CS4 .4.11 Vista Home Premium (SP1)
Re: 曲線移動
ご自分で、何を調べられ、どのようなことを試されて、どこまでおわかりなったのでしょうか?→「初心者なので最初から説明してください」【やり方(スクリプトの書き方)を教えてください

[1]「等速」で「目的地に着いたら止まる」「直線」移動の「アクションスクリプト」ならおできになるのですか?
[2]「等速」で「目的地に着いたら止まる」「曲線移動のアクションスクリプト」はいかがですか?
[3]「減速して目的地に着いたら止まる」「直線」移動の「アクションスクリプト」は作成できますか?
引用:
1percenterさんは書きました:
減速して目的地に着いたら止まる曲線移動の
アクションスクリプトを作りたいのですが
どなたかご教授頂けませんでしょうか?
...[中略]...
初心者勉強中につき解説つきで
頂けると大変たすかります。


----------------
 

1percenter
Åê¹ÆNo.41859
投稿日時: 2009-3-22 1:33
新米
居住地: 神奈川
投稿: 27
使用環境:
Mac os 10.5.6
Flash CS3
Re: 曲線移動
申し訳ございません、
恥ずかしながら[1][2][3]どれも出来ません。

ご指摘の内容でどのように考えを進めていけば良いのかが
つかめたような気がしますので、1-3の順にフォーラムの
過去ログなどをみて勉強してみます。

その際に具体的に質問出来るようになりましたら、
また投稿させて頂きます。
野中文雄
Åê¹ÆNo.41860
投稿日時: 2009-3-22 2:00
ちょんまげら
居住地: 東京
投稿: 4247
使用環境:
CS4 .4.11 Vista Home Premium (SP1)
Re: 曲線移動
そうですね。一度にすべてをやろうとするのでなく、ステップに分けて考えることが大事です。まず、[1]はさらにつぎのような処理に分けられます。

[1-1]「等速」で「目的地」の方向に移動し続ける。
[1-2]「目的地に着いた」あるいは「十分に近づいた」(もしくは「通り過ぎた」)かどうかを判定する。
[1-3] [1-2]の判定により(「目的地」で)「止まる」。

[2]は「曲線移動」がどのような「曲線」かによって、処理の仕方は変わってきそうです。[3]は「イーズアウト」といわれるアニメーション表現を理解されればよいでしょう。
引用:
1percenterさんは書きました:
ご指摘の内容でどのように考えを進めていけば良いのかが
つかめたような気がしますので、1-3の順にフォーラムの
過去ログなどをみて勉強してみます。


----------------
 

1percenter
Åê¹ÆNo.41861
投稿日時: 2009-3-23 0:54
新米
居住地: 神奈川
投稿: 27
使用環境:
Mac os 10.5.6
Flash CS3
Re: 曲線移動
勝手な質問にご返信誠にありがとうございます、
さっそく[1]をやってみました。
多分無事出来ているかと思いますが、このレスの最後に
記述しておきました。

[2]を考えたときに直線ですと単純に
「xかyに1を足し続けなさい」で出来るのですが、
曲線になると求め方に方程式のようなものがあるかと思います。
調べてみると「2次曲線」と「サインカーブ」がありました、
例えば2次曲線
y = a*(x-b)*(x-c) + d と言う2次関数で表される曲線に
沿ってオブジェクトを移動させる。
この式を実際の動きに反影する考え方が分からないのですが、
この式で幅が50-200の間で曲線を描くように書くと
aa_mc._x = 50;
aa_mc._y = 50;
aa_mc.onEnterFrame = function() {
aa_mc._x += 1;
aa_mc._y = -0.04*(aa_mc._x-200)*(aa_mc._x-50)+50;
if (aa_mc._x>200) {
delete aa_mc.onEnterFrame;
}
};
aa_mc._x += 1;で横に移動する量だから速度が変わるように見える
ということは何となく分かりますが、
2次関数で表される曲線を理解しようとしたとき、
y = a*(x-b)*(x-c) + d
の「a」「b」「c」「d」の役割とは?くらいに
考えていてよいものなのでしょうか?例えば、
「a」は曲線の高さ、「b」「c」はxの始点と終点だよ、「d」はy軸に交わる点だよと。

しかし何故aが-0.04などという数値になっているか(調べた先がその数値でした)と言われると答えられません。

[2]を制作してみましたが、[1]のような理解が得られなかった
ような気がします。[1]は自分で考えて答えが出ましたが、
[2]では結局ネットで調べてそこに「当てはめた」という
感じが強くします。[1-1~3]のような段階で考えたとき、
[2]はどのように順を踏めば良いのでしょうか?

長くなってしまいましたが、よろしくお願い致します。

以下[1]の制作例

[1-1]「等速」で「目的地」の方向に移動し続ける。

aa_mc.onEnterFrame = function() {
_x += 1;
};

ポイント
+=  加算後代入演算子
x += y
x = x + y
x += 1 を繰り返す事でxは1づつ増え続ける
x=1を繰り返しても、xはずっと1のまま


[1-2]「目的地に着いた」あるいは「十分に近づいた」(もしくは「通り過ぎた」)かどうかを判定する。

aa_mc._x = 0;

var n:Number = 50;

aa_mc.onEnterFrame = function() {
_x += 1;
trace(_x)
if (_x == n) {
trace("50 !");
}
};

ポイント
trace("50 !");はonEnterFrame内に書かなければ、
スクリプトが読み込まれた時にはn==50となっておらず、
無効とされる。
onEnterFrame内に書いておけばonEnterFrameが有効の間
traceされつづけ、n==50の時点で出力される。


[1-3] [1-2]の判定により(「目的地」で)「止まる」。

aa_mc._x = 0;

var n:Number = 50;

aa_mc.onEnterFrame = function() {
_x += 1;
trace(_x)
if (_x == n) {
delete aa_mc.onEnterFrame;
}
};

ポイント
traceと同様、delete aa_mc.onEnterFrame;もonEnterFrame内に書く
野中文雄
Åê¹ÆNo.41862
投稿日時: 2009-3-23 7:43
ちょんまげら
居住地: 東京
投稿: 4247
使用環境:
CS4 .4.11 Vista Home Premium (SP1)
Re: 曲線移動
以下の2次曲線の「『b』『c』はxの始点と終点」と気づかれたのは正解です。そして、「d」はその「始点と終点」のy座標になります。

「a」はものを投げ上げる放物線でいえば、重力の大きさです。数字(係数の絶対値)が大きいほどカーブは急になります(重力は小さい)。つまり、この係数値で放物線の曲がり具合を調整します(下図参照)。

なお、係数「a」のプラスマイナスは、放物線の頂点が上下どちら向きかを決めます(数学のグラフ用紙とディスプレイでは、y軸の上下が逆になりますので注意しましょう)。
引用:
1percenterさんは書きました:
例えば2次曲線
y = a*(x-b)*(x-c) + d と言う2次関数で表される曲線に
沿ってオブジェクトを移動させる。
...[中略]...
2次関数で表される曲線を理解しようとしたとき、
y = a*(x-b)*(x-c) + d

の「a」「b」「c」「d」の役割とは?くらいに
考えていてよいものなのでしょうか?例えば、
「a」は曲線の高さ、「b」「c」はxの始点と終点だよ、「d」はy軸に交わる点だよと。



----------------
 

1percenter
Åê¹ÆNo.41863
投稿日時: 2009-3-23 14:16
新米
居住地: 神奈川
投稿: 27
使用環境:
Mac os 10.5.6
Flash CS3
Re: 曲線移動
ご返信有り難うございます。
重力の「a」と、「xの始点と終点」のy座標の「d」、
非常によく分かりました、このように求める動きに対して
必要な計算での、代入する値の意味を理解していきたいと思います。
ここで聞くようなことではないかもしれませんが、
このように理解しやすく代入する値の意味を掲載しているような
サイトや、参考書などがあればお教え頂きたいのですが宜しいでしょうか?

[3]は「イーズアウト」といわれるアニメーション表現を
理解されればよいでしょう。

イーズアウトのリンク先を参考させていただき、
「減速して目的地に着いたら止まる」「直線」移動の
「アクションスクリプト」を書いてみました。

this.aa_mc.n = 100;
this.aa_mc.onEnterFrame = function() {
this._x += (this.n-this._x)*0.2;
if (this._x == 100) {
delete this.aa_mc.onEnterFrame;
}
};

減速移動の式
x += ( 目的地 - x )*速度
※ 0>速度>1

ここで理解が足りない部分として、
座標がステージ上を指しているのか、
aa_mcの中の座標を指しているのかという課題が見えました。
ターゲットパスについての理解を深められるよう質問させていただきます。

例えば this.aa_mc._x = 100;
「aa_mc」がステージ上のx座標100の位置にある。
それでは、「aa_mc」上のx座標100の位置を表す場合は、
どうなるのでしょうか?

また、
this._x += (this.n-this._x)*0.2;
この部分を
this.aa_mc._x += (this.aa_mc.n-this.aa_mc._x)*0.2;
とすると動かなくなってしまうのですが、

if (this._x == 100) {
delete this.aa_mc.onEnterFrame;
}
ここを
if (this.aa_mc._x == 100) {
delete this.aa_mc.onEnterFrame;
}
このように書き換えてもonEnterFrameは_x==100の時点で無効となります。

この現象が理解出来ないので、説明頂けると大変助かります。

以上、宜しくお願い致します。
野中文雄
Åê¹ÆNo.41866
投稿日時: 2009-3-23 21:29
ちょんまげら
居住地: 東京
投稿: 4247
使用環境:
CS4 .4.11 Vista Home Premium (SP1)
Re: 曲線移動
「代入する値の意味」というのは、スクリプトとしての処理内容でしょうか。それとも、その値を算出する数学的な論理ですか?前者については、多くの参考書で一応説明はされていると思います。もっともその突込み具合は、筆者によって幅はあるでしょう。

後者については、ActionScript 3.0の解説書では、いくつか出てきています。『ActionScript 3.0アニメーション』や『Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]』あたりが挙げられます。内容としては、後者の方がやさしそうです。

なお、拙著『ActionScript 3.0プロフェッショナルガイド』は、数学的な解説をする章は特別に設けています(あいにく放物線の解説はありません)。
引用:
1percenterさんは書きました:
ここで聞くようなことではないかもしれませんが、
このように理解しやすく代入する値の意味を掲載しているような
サイトや、参考書などがあればお教え頂きたいのですが宜しいでしょうか?

おそらく、thisの参照先について戸惑われているように見受けられます。まずは、「Buttonのthis」をお読みください。ただし、ActionScript 3.0では、this参照の仕様が変わります(「関数・メソッドとthis」参照)。
引用:
ここで理解が足りない部分として、
座標がステージ上を指しているのか、
aa_mcの中の座標を指しているのかという課題が見えました。


----------------
 

1percenter
Åê¹ÆNo.41868
投稿日時: 2009-3-24 3:04
新米
居住地: 神奈川
投稿: 27
使用環境:
Mac os 10.5.6
Flash CS3
Re: 曲線移動
ご返信ありがとうございます。

「代入する値の意味」という質問が曖昧で申し訳ございません。
例えば
y = a*(x-b)*(x-c) + d と言う2次関数の
aはどういう処理の為の数値なのか、bcdは…。
という事でした。お教え頂いたaは+で上へ、-で下へかかる重力だという事。そのような解説を調べたいと思いました。
ご呈示して頂いた書籍など一度見てみようかと思います。

this ようやく理解出来ました。

this.aa_mc.n = 100;
//↑↓このthisはaa_mcが配置してあるステージを参照している
this.aa_mc.onEnterFrame = function() {
this._x += (this.n-this._x)*0.2;
if (this._x == 100) {
delete this.aa_mc.onEnterFrame;
}
};
//{}内のthisはaa_mc内を参照している

delete this.aa_mc.onEnterFrame;
これは間違いで
delete this.onEnterFrame;
ですね。

ターゲットパスがないと、スクリプトを記述した
タイムラインが参照されるということ。
関数ブロック({})内のthis参照はfunctionを定義したインスタンスを指すということ。

勉強になりました。

これでようやく、[1][2][3]が完了しましたので、
[4]「減速して目的地に着いたら止まる」「曲線」移動の「アクションスクリプト」の作成にチャレンジしてみます。

[4]でまた質問させて頂くかと思いますので、
よろしくお願い致します。ありがとうございました。
1percenter
Åê¹ÆNo.41872
投稿日時: 2009-3-25 16:31
新米
居住地: 神奈川
投稿: 27
使用環境:
Mac os 10.5.6
Flash CS3
Re: 曲線移動
[4]「減速して目的地に着いたら止まる」「曲線」移動の「アクションスクリプト」作ってみました。

動きとしては出来たのですが、delete this.onEnterFrame;の箇所で疑問点が出てしまったので質問させて頂きます。

まず制作したactionscriptを下記に記述します。

//イーズアウト(減速移動)_x += ( 目的地 - _x )*速度
//2次曲線 y = a*(x-b)*(x-c) + d

var wight:Number = this.aa_mc.wight=-0.04;//重力
var xst:Number = this.aa_mc.xst=50;//xの始点
var xend:Number = this.aa_mc.xend=200;//xの終点
var xy:Number = this.aa_mc.xy=50;//xの始点終点とyの交点
var sp:Number = this.aa_mc.sp=0.1;//速度

this.aa_mc._x = 50;
this.aa_mc._y = 50;

this.aa_mc.onEnterFrame = function() {
this._x += (this.xend-this._x)*this.sp;
this._y = this.wight*(this._x-this.xst)*(this._x-this.xend)+this.xy;
if (this._x>=this.xend) {
delete this.onEnterFrame;
}
trace(this._x);
};

ここでx座標が目的地(xend)の値とより大きいか等しくなった時に、
delete this.onEnterFrame;しなさいという命令箇所の部分で、
if (this._x>=this.xend) {
delete this.onEnterFrame;
}
としているのですが、this.x座標をtraceしてみると、減速の設定上のことだと思うのですが199.55で止まってしまい、this._x>=this.xendが成り立たなくなってしまっていました。

そこで、this._xを整数にすれば良いと思い、
減速設定を下記のようにMath.round()で括ってtraceしてみると、
今度は196で止まってしまいます。
再度int()で括ってみると191で止まってしまいます。

this._x += Math.round((this.xend-this._x)*this.sp);
this._x += int((this.xend-this._x)*this.sp);

単純にMath.round()もint()もつかわずに、
if (this._x>=this.xend-1)としてしまえば解決するのですが、
199.55が整数値に変換されて200と判別される正しい対処法を知りたく質問させて頂きました。

また、Math.round()やint()を設定したときにどうして、
x座標が200や201のように四捨五入されず196や191といった数字に
なっていたのかという事も理解したいと思っておりますので、
何卒よろしくお願い致します。
(1) 2 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を
 
Copyright (C) 2003 FLASH-japan. All rights reserved.
Powered by Xoops